import { ref, Ref, onUnmounted, onMounted, defineComponent, nextTick } from 'vue';
// import ContextMenu from '@imengyu/vue3-context-menu';
import { h } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import ContextMenu from 'shufflemanvue3-context-menu';
import { useProjectStore } from '@/store';
import router from '@/router/index';
import { getMOdeListArr, getMOdeListcorrelation, ExportInfoType } from '@/utils/getRemComputed';
// const ContextMenu = {
//   showContextMenu: function name(params) {},
// };
const store = useProjectStore();

export const getActiveBorder = () => {
  // let route=useRoute()
  const elements = document.querySelectorAll('.border-hover-style');
  const elements2 = document.querySelectorAll('.vdr-container');
  // if(route.meta.loopType){
  //   return
  // }
  nextTick(() => {
    elements2.forEach((element) => {
      element.addEventListener('mouseover', (event) => {
        // 当鼠标悬停在元素上时，为该元素添加hovered类
        // if(route.meta.loopType){
        //   return
        // }
        element.classList.add('hovered');

        // 阻止事件冒泡到父元素或其他同类名元素
        event.stopPropagation();
      });

      element.addEventListener('mouseout', (event) => {
        // 当鼠标离开元素时，移除该元素的hovered类
        element.classList.remove('hovered');

        // 阻止事件冒泡到父元素或其他同类名元素（尽管mouseout通常不会冒泡）
        event.stopPropagation();
      });
    });
  });
  // 为每个元素添加鼠标进入和离开事件监听器
  elements.forEach((element) => {
    element.addEventListener('mouseover', (event) => {
      // 当鼠标悬停在元素上时，为该元素添加hovered类
      // if(route.meta.loopType){
      //   return
      // }
      element.classList.add('hovered');

      // 阻止事件冒泡到父元素或其他同类名元素
      event.stopPropagation();
    });

    element.addEventListener('mouseout', (event) => {
      // 当鼠标离开元素时，移除该元素的hovered类
      element.classList.remove('hovered');

      // 阻止事件冒泡到父元素或其他同类名元素（尽管mouseout通常不会冒泡）
      event.stopPropagation();
    });
  });
};
export const getEditExhibitId = (index?: number) => {
  //获取当前编辑的id

  store.templateMOdeList.forEach((element) => {
    if (element.id == store.contextmenuchildId) {
      if ((index || index === 0) && index !== -1) {
        store.editExhibitId =
          element.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList[
            store.contextmenuExhibitId
          ].id;
      } else {
        store.editExhibitId =
          element.showpieceList[store.contextmenuGroupId].showpieceList[store.contextmenuExhibitId].id;
      }
    }
    element.children.forEach((el) => {
      if (el.id == store.contextmenuchildId) {
        if ((index || index === 0) && index !== -1) {
          store.editExhibitId =
            el.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList[
              store.contextmenuExhibitId
            ].id;
        } else {
          store.editExhibitId = el.showpieceList[store.contextmenuGroupId].showpieceList[store.contextmenuExhibitId].id;
        }
      }
      el.children.forEach((arr) => {
        if (arr.id == store.contextmenuchildId) {
          if ((index || index === 0) && index !== -1) {
            store.editExhibitId =
              arr.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList[
                store.contextmenuExhibitId
              ].id;
          } else {
            store.editExhibitId =
              arr.showpieceList[store.contextmenuGroupId].showpieceList[store.contextmenuExhibitId].id;
          }
        }
      });
    });
  });
};
export const getEditExhibitType = (index?: number) => {
  //获取当前展品是否可编辑
  // console.log(index,'辅助信息')
  let EditLock = false;
  store.templateMOdeList.forEach((element) => {
    if (element.id == store.contextmenuchildId) {
      if ((index || index === 0) && index !== -1) {
        EditLock =
          element.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList[
            store.contextmenuExhibitId
          ].isCompanyUser;
      } else {
        EditLock =
          element.showpieceList[store.contextmenuGroupId].showpieceList[store.contextmenuExhibitId].isCompanyUser;
      }
    }
    element.children.forEach((el) => {
      if (el.id == store.contextmenuchildId) {
        if ((index || index === 0) && index !== -1) {
          EditLock =
            el.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList[
              store.contextmenuExhibitId
            ].isCompanyUser;
        } else {
          EditLock = el.showpieceList[store.contextmenuGroupId].showpieceList[store.contextmenuExhibitId].isCompanyUser;
        }
      }
      el.children.forEach((arr) => {
        if (arr.id == store.contextmenuchildId) {
          if ((index || index === 0) && index !== -1) {
            EditLock =
              arr.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList[
                store.contextmenuExhibitId
              ].isCompanyUser;
          } else {
            EditLock =
              arr.showpieceList[store.contextmenuGroupId].showpieceList[store.contextmenuExhibitId].isCompanyUser;
          }
        }
      });
    });
  });
  return EditLock;
};
export const exbitMenuShow = (e: any, index?: number) => {
  if ((index || index === 0) && index !== -1) {
    store.selectAuxiliaryIndex = index;
  } else {
    store.selectAuxiliaryIndex = -1;
  }
  let lockType = getEditExhibitType(store.selectAuxiliaryIndex); //当前是否可编辑
  // store.contextmenuchildId,
  // store.selectAuxiliaryIndex,
  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    iconFontClass: 'freeIcon',
    items: [
      {
        disabled: !lockType,
        icon: 'icon-bianji',
        label: '编辑展品',
        onClick: () => {
          if (lockType) {
            getEditExhibitId(store.selectAuxiliaryIndex);
            store.setaddExbitionShow(true);
          } else {
            MessagePlugin.error('当前展品无法编辑');
          }
        },
      },
      {
        icon: 'icon-shanchu',
        label: '删除展品',
        onClick: () => {
          store.delExbitShow = true;

          // store.removeExhibitsGroup(store.selectAuxiliaryIndex);
        },
      },
      // {
      //   label: '删除展品',
      //   onClick: () => {
      //     // alert('确定要删除吗');
      //     store.removeExhibitsItem();
      //   },
      // },

      // {
      //   label: '结构调整',
      //   onClick: () => {},
      // },
      // {
      //   label: '添加展品',
      //   children: [{ label: '添加' }, { label: 'Item2' }, { label: 'Item3' }],
      // },
    ],
  });
};
export const exbitListMenuShow = (e: any, index?: number) => {
  if ((index || index === 0) && index !== -1) {
    store.selectAuxiliaryIndex = index;
  } else {
    store.selectAuxiliaryIndex = -1;
  }
  console.log(store.contextmenuGroupId);
  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    iconFontClass: 'freeIcon',
    items: [
      {
        customClass: 'menu-item-style',
        icon: 'icon-sucai',
        label: '更换素材',
        onClick: () => {
          store.setreplaceMaterialsShow(true);
        },
      },
      {
        icon: 'icon-yidong',
        label: '调整展品顺序',
        onClick: () => {
          store.sortExbitionShow = true;
        },
      },
      {
        customClass: '',
        icon: 'icon-guanlian',
        label: '添加展品',
        children: [
          {
            disabled: store.isActivitys ? true : false,
            customClass: 'menu-item-style',
            icon: 'icon-sucai',
            label: '录入展品',
            onClick: () => {
              store.editExhibitId = 0;
              store.setaddExbitionShow(true);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从本展览展品库选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 3);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从私有库选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 2);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从公有库选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 1);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从我的关注选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 5);
            },
          },
        ],
      },
      {
        customClass: 'menu-item-style-mg',
        icon: 'icon-shanchu',
        label: '删除',
        onClick: () => {
          store.delGroupShow = true;
          // store.removeExhibitsGroup(index);
        },
      },
    ],
  });
};
export const childItemMenuShow = (e: any, index?: number) => {
  if ((index || index === 0) && index !== -1) {
    store.selectAuxiliaryIndex = index;
  } else {
    store.selectAuxiliaryIndex = -1;
  }
  let idInfo: ExportInfoType = getMOdeListcorrelation(
    store.templateMOdeList,
    store.contextmenuchildId,
    store.selectAuxiliaryIndex,
  ); //获取所有关联信息
  console.log(idInfo);
  if ((index || index === 0) && index !== -1) {
    ContextMenu.showContextMenu({
      x: e.x,
      y: e.y,
      iconFontClass: 'freeIcon',
      items: [
        {
          customClass: 'menu-item-style',
          icon: 'icon-sucai',
          label: '更换素材',
          onClick: () => {
            store.setreplaceMaterialsShow(true);
          },
        },
        {
          icon: 'icon-bianji',
          label: (index || index === 0) && index !== -1 ? '编辑辅助信息' : '编辑单元信息',
          onClick: () => {
            if ((index || index === 0) && index !== -1) {
              store.setItemList(index);
              store.auxiliaryShow = true;
            } else {
              store.setItemList();
              store.unitEditShow = true;
            }
          },
        },

        {
          disabled: (index || index === 0) && index !== -1 ? true : false,
          icon: 'icon-tianjiazhizhanlan',
          label: '添加单元',
          children: [
            {
              disabled: idInfo.level === 3 ? true : false,
              icon: 'icon-ziji',
              label: '添加子单元',
              onClick: () => {
                store.addUnitInfo(1);
              },
            },
            {
              disabled: idInfo.itemTotal >= 15 ? true : false,
              icon: 'icon-tongji',
              label: '添加同级单元',
              onClick: () => {
                store.addUnitInfo(2);
              },
            },
          ],
        },
        {
          disabled: ((index || index === 0) && index !== -1) || idInfo.AuxiliaryTotal >= 15 ? true : false,
          icon: 'icon-tianjia',
          label: '添加辅助信息',
          onClick: () => {
            store.addUnitInfo(3);
          },
        },
        {
          icon: 'icon-guanlian',
          label: '添加展品',
          children: [
            {
              disabled: store.isActivitys ? true : false,
              customClass: 'menu-item-style',
              icon: 'icon-sucai',
              label: '录入展品',
              onClick: () => {
                store.editExhibitId = 0;
                store.setaddExbitionShow(true);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从本展览展品库选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 3);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从私有库选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 2);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从公有库选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 1);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从我的关注选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 5);
              },
            },
          ],
        },
        {
          disabled: (index || index === 0) && index !== -1 ? false : true,
          icon: 'icon-yidong',
          label: '移动至',
          onClick: () => {
            store.moveAuxiliaryShow = true;
          },
        },
        {
          customClass: 'menu-item-style',
          // disabled: (index || index === 0) && index !== -1 ? true : false,
          icon: 'icon-paixu',
          label: '调整单元顺序',
          onClick: () => {
            if ((index || index === 0) && index !== -1) {
              store.AuxiliarySrotShow = true;
            } else {
              store.setOutlineSortShow(true);
            }
          },
        },

        {
          disabled: idInfo.isDelete ? false : true,
          customClass: 'menu-item-style-mg',
          icon: 'icon-shanchu',
          label: '删除',
          onClick: () => {
            store.unitDleteShow = true;
          },
        },
      ],
    });
  } else {
    ContextMenu.showContextMenu({
      x: e.x,
      y: e.y,
      iconFontClass: 'freeIcon',
      items: [
        {
          customClass: 'menu-item-style',
          icon: 'icon-sucai',
          label: '更换素材',
          onClick: () => {
            store.setreplaceMaterialsShow(true);
          },
        },
        {
          icon: 'icon-bianji',
          label: (index || index === 0) && index !== -1 ? '编辑辅助信息' : '编辑单元信息',
          onClick: () => {
            if ((index || index === 0) && index !== -1) {
              store.setItemList(index);
              store.auxiliaryShow = true;
            } else {
              store.setItemList();
              store.unitEditShow = true;
            }
          },
        },

        {
          disabled: (index || index === 0) && index !== -1 ? true : false,
          icon: 'icon-tianjiazhizhanlan',
          label: '添加单元',
          children: [
            {
              disabled: idInfo.level === 3 ? true : false,
              icon: 'icon-ziji',
              label: '添加子单元',
              onClick: () => {
                store.addUnitInfo(1);
              },
            },
            {
              disabled: idInfo.itemTotal >= 15 ? true : false,
              icon: 'icon-tongji',
              label: '添加同级单元',
              onClick: () => {
                store.addUnitInfo(2);
              },
            },
          ],
        },
        {
          disabled: ((index || index === 0) && index !== -1) || idInfo.AuxiliaryTotal >= 15 ? true : false,
          icon: 'icon-tianjia',
          label: '添加辅助信息',
          onClick: () => {
            store.addUnitInfo(3);
          },
        },
        {
          icon: 'icon-guanlian',
          label: '添加展品',
          children: [
            {
              disabled: store.isActivitys ? true : false,
              customClass: 'menu-item-style',
              icon: 'icon-sucai',
              label: '录入展品',
              onClick: () => {
                store.editExhibitId = 0;
                store.setaddExbitionShow(true);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从本展览展品库选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 3);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从私有库选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 2);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从公有库选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 1);
              },
            },
            {
              icon: 'icon-xuanze',
              label: '从我的关注选择',
              onClick: () => {
                store.setaddGroupExhibitsShow(true, 5);
              },
            },
          ],
        },

        {
          customClass: 'menu-item-style',
          // disabled: (index || index === 0) && index !== -1 ? true : false,
          icon: 'icon-paixu',
          label: '调整单元顺序',
          onClick: () => {
            if ((index || index === 0) && index !== -1) {
              store.AuxiliarySrotShow = true;
            } else {
              store.setOutlineSortShow(true);
            }
          },
        },

        {
          disabled: idInfo.isDelete ? false : true,
          customClass: 'menu-item-style-mg',
          icon: 'icon-shanchu',
          label: '删除',
          onClick: () => {
            store.unitDleteShow = true;
          },
        },
      ],
    });
  }
};
export const FlotexbitListMenuShow = (e: any, index?: number) => {
  if ((index || index === 0) && index !== -1) {
    store.selectAuxiliaryIndex = index;
  } else {
    store.selectAuxiliaryIndex = -1;
  }
  ContextMenu.showContextMenu({
    // getContainer:()=>event,
    x: e.x,
    y: e.y,
    iconFontClass: 'freeIcon',
    items: [
      {
        customClass: 'menu-item-style',
        icon: 'icon-sucai',
        label: '更换素材',
        onClick: () => {
          store.setreplaceMaterialsShow(true);
        },
      },
      {
        icon: 'icon-yidong',
        label: '调整展品顺序',
        onClick: () => {
          store.sortExbitionShow = true;
        },
      },
      {
        customClass: 'menu-item-style',
        icon: 'icon-guanlian',
        label: '添加展品',
        children: [
          {
            disabled: store.isActivitys ? true : false,
            customClass: 'menu-item-style',
            icon: 'icon-sucai',
            label: '录入展品',
            onClick: () => {
              store.editExhibitId = 0;
              store.setaddExbitionShow(true);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从本展览展品库选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 3);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从私有库选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 2);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从公有库选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 1);
            },
          },
          {
            icon: 'icon-xuanze',
            label: '从我的关注选择',
            onClick: () => {
              store.setaddGroupExhibitsShow(true, 5);
            },
          },
        ],
      },
      {
        customClass: 'menu-item-style-mg',
        icon: 'icon-shanchu',
        label: '删除',
        onClick: () => {
          store.delGroupShow = true;
        },
      },
    ],
  });
};

function findScrollableParent(element) {
  // 辅助函数：找到元素的最近的可滚动父元素
  var style = window.getComputedStyle(element, null);
  var overflow = style.getPropertyValue('overflow');
  var overflowX = style.getPropertyValue('overflow-x');
  var overflowY = style.getPropertyValue('overflow-y');

  if (overflow == 'scroll' || overflowX == 'scroll' || overflowY == 'scroll') {
    return element;
  }

  if (element.parentNode) {
    return findScrollableParent(element.parentNode);
  }

  return null;
}
export const psthOutline = (id: string) => {
  //通过元素滚动到指定单元函数
  // Level1outline505056006086725
  var element = document.getElementById(id);
  console.log(element.offsetLeft);
  let parentElement = document.getElementById('edit-scroll-box');
  parentElement.scrollLeft = element.offsetLeft;
  // element.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
export const psthOutlineRoute = (id: string, routeFlag: any) => {
  //通过元素滚动到指定单元函数
  router.push({ name: routeFlag ? 'exhibitionHome' : 'templateedit' }).then(() => {
    nextTick(() => {
      var element = document.getElementById(id);
      let parentElement = document.getElementById('edit-scroll-box');
      parentElement.scrollLeft = element.offsetLeft;
    });
  });
};
